<template>
  <div class="address-index container">
    <Header><span>我的地址</span></Header>
    <section class="wrapper">
      <div class="content">
        <ul v-if="addressList.length">
          <li
            v-for="item in addressList"
            :key="item.id"
            @click="goAddAddress(item)"
          >
            <div>
              <div class="info">
                <span>{{ item.name }}</span>
                <span class="lt">{{ item.tel }}</span>
              </div>
              <div class="place">
                <span class="active" v-if="item.isDefault == 1">[默认]</span>
                <span>{{ item.province }}</span>
                <span class="lt">{{ item.city }}</span>
                <span class="lt">{{ item.county }}</span>
                <span class="lt">{{ item.addressDetail }}</span>
              </div>
            </div>
            <div>
              <i class="iconfont icon-youjiantou"></i>
            </div>
          </li>
        </ul>
        <h5 v-else>暂无收货地址信息</h5>
        <div class="add-address" @click="goAddAddress('add')">添加地址</div>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/common/Header.vue";
import Tabbar from "@/components/common/Tabbar";
//引入封装后的axiox
import http from "@/common/api/request";
import { mapState, mapMutations } from "vuex";
//引入滑动插件
import BetterScroll from "better-scroll";
import bus from "@/common/bus";
export default {
  name: "Address-Index",
  components: { Header, Tabbar },
  data() {
    return {
      addressStatus: false,
    };
  },
  methods: {
    ...mapMutations(["initData"]),
    goAddAddress(option) {
      //this.addressStatus如果为true,说明从订单进入的，显示选择地址
      if (this.addressStatus) {
        bus.$emit("selectAddress", JSON.stringify(option));
        this.$router.back();
        return;
      }

      this.$router.push({
        name: "add-address",
        params: {
          key: JSON.stringify(option),
        },
      });
    },
    getData() {
      http
        .$axios({
          url: "/api/select_address",
          headers: {
            token: true,
          },
        })
        .then((res) => {
          this.initData(res.data);
        });

      //当dom都加载完毕了再执行
      this.$nextTick(() => {
        new BetterScroll(".wrapper", {
          movable: false,
          zoom: true,
          click: true,
          bounce: false,
        });
      });
    },
  },
  computed: {
    ...mapState({
      addressList: (state) => state.address.list,
    }),
  },
  created() {
    this.getData();
    //从订单页面进来的
    if (this.$route.query.type == "select") {
      this.addressStatus = true;
    }
  },
};
</script>

<style scoped lang="scss">
section {
  flex: 1;
  overflow: hidden;
  background-color: #f5f5f5;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ul {
    width: 100%;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.3rem 0;
      padding: 0.3rem 0 0.3rem 0.3rem;
      background-color: #ffffff;
      font-size: 0.4rem;

      .lt {
        padding-left: 0.2rem;
      }
      .active {
        color: red;
      }
      .info {
        margin-bottom: 0.2rem;
      }
      i {
        font-size: 1rem;
        color: #999;
      }
    }
  }

  .add-address {
    margin-top: 1rem;
    width: 3.2rem;
    width: 2.666666rem;
    line-height: 1.066666rem;
    font-size: 0.48rem;
    text-align: center;
    color: #fff;
    background-color: #b0352f;
    border-radius: 5px;
    margin-bottom: 3rem;
  }
}
::v-deep .tabbar {
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 0px 0px 5px 1px #ccc;
}
</style>